<template>
  <view>
    <!-- 导航栏公告/任务 -->
    <view class="topBar-box">
      <view :class="{'announcement':true,'active':show===1}" @click="show=1">公告</view>
      <view :class="{'task':true,'active':show===2}" @click="show=2">系统通知</view>
    </view>
      <!-- 没有消息的情况 -->
    <block v-if="show===1" class="announcement-box">
      <block v-if="accList.length===0">
        <view class="empty-box">
        <img src="../../static/不存在.png" alt="">
        <text>暂无消息</text>
        </view>
      </block>
      
      
      
      
     </block>
    <!-- 有任务的情况 -->
    <block v-if="show===2" class="task-box">
      <view class="icon-box">
      <text class="icon">@</text>
      <text>全部已读</text>
    </view>
    <!-- 任务列表 -->
    <view class="taskList-box">
      <view class="taskList-item">
        <view class="title">您有新的运输任务</view>
        <view class="text">
          <text>运输车辆: 京A 12345</text>
          <text class="route">运输路线: 北京--广州</text>
        </view>
        <view class="time-box" id="time-box">
          <text class="time" style="color: #8a8a8a;">2023-03-06 10:06:02</text>
          <view class="detail"><button class="mini-btn" type="warn"  plain size="mini">查看详情</button></view>
        </view>
      </view>
       </view>
    </block>
  </view>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      // 导航栏显示与隐藏
      show: 1,
      // 公告数组列表
      accList:[],
      // 公告相关数据
      annData:{
        contentType:200,
        page:1,
        pageSize:10
      },
      // 任务通知相关数据
      taskData:{
        contentType:201,
        page:1,
        pageSize:10
      }
    };
  },
  watch:{
    show:{
      handler(value){
      },
      immediate:true
    }
  },
  created() {},
  mounted() {},
  onLoad() {
    this.getAnnList()
  },
  methods: {
    // 请求公告列表的方法
   async getAnnList(){
      const res = await uni.$http.get('/messages/page',{
        contentType:201,
        page:1,
        pageSize:10
      })
      console.log(res.data.data.item)
    }

  },
  onShow() {
    uni.setTabBarBadge({
      index: 1,
      text: "1",
    });
  },
};
</script>

<style lang="scss" scoped>
.topBar-box {
  height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 75px;
  .announcement,
  .task {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    height: 30px;
    font-size: 14px;
    color: #333333;
  }
  
  .active {
    &::after {
      content: "";
      display: block;
      width: 20px;
      height: 2px;
      background-color: red;
    }
  }
}
.empty-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 155px;
 img{
  width: 200px;
  height: 120px;
  margin-bottom: 10px;
 }
 text{
  color: #818181;
 }
}
.icon-box {
  height: 55px;
  display: flex;
  align-items: center;
  padding-left: 17px;
  color: #818181;
  background-color: #f5f5f5;
  .icon {
    margin-right: 5px;
    font-size: 14px;
  }
}
.annList-box {
  .annList {
    
    .ann-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60px;
      padding: 0 22px;
      .content {
        width: 240px;
        
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
       
      }
      .noRead{
        &::before {
          content: "";
          display: inline-block;
          width: 6px;
          height: 6px;
          background-color: red;
          border-radius: 50%;
          margin-right: 5px;
        }
      }
      .time {
        font-size: 12px;
        color: #818181;
      }
    }
  }
}
.taskList-box{
  padding: 0 13px;
  background-color: #f5f5f5;
  .taskList-item{
    box-sizing: border-box;
    width: 348px;
    height: 154px;
    padding: 16px 16px 28px;
    background-color: #fff;
  
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 14px;
    .title{
      font-size: 14px;
   
      &::after {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        background-color: red;
        border-radius: 50%;
        margin-left: 5px;
      }
    }
    .text{
      display: flex;
      justify-content: space-between;
      color: #818181;
      .route{
        width: 151px;
     
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .time-box{
      display: flex;
      justify-content: space-between;
   
      align-items: center;
      .detail{
        display: flex;
        align-items: center; 
        .mini-btn{
        font-size: 12px;
        border-radius: 15px;
      }
      }
    }
  }
}
</style>
